<template>
  <div style="position: relative; height: 100%;">
    <el-form ref="cameraInfoFormRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="设备名称" prop="equipmentName">
        <el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
      </el-form-item>
      <el-form-item label="设备分组" prop="groupId">
        <el-select v-model="form.groupId" v-loading="cameraGroupLoading" clearableplaceholder="请选择" clearable>
          <el-option v-for="item in cameraGroupList" :key="item.equipmentCameraGroupId" :label="item.cameraGroupName" :value="item.equipmentCameraGroupId" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备编码" prop="equipmentCode">
<!--          <div style="width: 250px;">{{ form.equipmentCode }}</div>-->
        <el-input v-model="form.equipmentCode" placeholder="请输入设备编码" />
      </el-form-item>
      <el-form-item label="设备识别码" prop="nodeId">
        <div style="width: 600px;display: flex">
          <el-input v-model="form.nodeId" placeholder="设备识别码" style="width: 500px; margin-right: 10px; pointer-events: none;"/>
          <el-button type="primary" plain @click="openSelectDevice">选择</el-button>
        </div>

      </el-form-item>
      <el-form-item label="安装位置" prop="parkPlaceIdList">
        <el-cascader v-model="form.parkPlaceIdList" :options="parkPlaceList" :props="{ value: 'id', label: 'label', children: 'children', checkStrictly: true }" style="width: 100%" clearable />
      </el-form-item>
      <el-form-item label="启用状态" prop="status">
        <el-select v-model="form.status" clearableplaceholder="请选择">
          <el-option label="停用" :value="0" />
          <el-option label="启用" :value="1" />
          <el-option label="作废" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>

    <div style="position: absolute; bottom: 10px; width: 100%; display: flex; justify-content: center;">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="emit('close')">取 消</el-button>
    </div>
    <Ivs3800DeviceSelect ref="singIvs3800DeviceSelectRef" :data="form.nodeId" :multiple="false" @confirm-call-back="selectDevice"></Ivs3800DeviceSelect>
  </div>
</template>
<script setup lang="ts">
import request from '@/utils/request';
import { parkTree } from '@/api/access/parking-lot/parking-lot-place';
import Ivs3800DeviceSelect from '@/components/Ivs3800DeviceSelect/index.vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['close', 'success']);
const props = defineProps({
  equipmentId: String
});

const cameraGroupList = ref([]);
const equipmentTypeList = ref([]);

const cameraGroupLoading = ref(false);
const equipmentTypeLoading = ref(false);
const buttonLoading = ref(false);

const cameraInfoFormRef = ref<ElFormInstance>();

const data = reactive({
  form: {
    cameraInfoId: undefined,
    remark: undefined,
    equipmentName: undefined,
    equipmentTypeId: undefined,
    parkId: undefined,
    equipmentId: undefined,
    status: undefined,
    onlineStatus: undefined,
    equipmentIdList: [],
    groupId: undefined,
    nodeId: undefined,
    equipmentCode: undefined,
    parkBuildingId: undefined,
    parkBuildingAreaId: undefined,
    parkBuildingFloorId: undefined,
    parkBuildingRoomId: undefined,
    parkPlaceIdList: [],
    groupType: 1 // 分组类型（1：摄像头；，2：消防设备；10：会议室；）
  },
  rules: {
    cameraInfoId: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
    status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
  }
});

const { form, rules } = toRefs(data);

/** 获取区域 */
let parkPlaceList = ref([]);
const getPlaceList = async () => {
  const res = await parkTree();
  parkPlaceList.value = res.data;

  console.log('获取园区区域：', parkPlaceList.value);
}

/** 查询摄像头分组列表 */
const getCameraGroupList = async () => {
  cameraGroupLoading.value = true;
  const res = await request({ url: '/equipment/equipment-camera-group/list', method: 'get' }).finally(() => cameraGroupLoading.value = false);
  cameraGroupList.value = res.rows;
};

/** 获取设备类型列表 */
const getEquipmentTypeList = async () => {
  equipmentTypeLoading.value = true;
  const res = await request({ url: '/equipment/equipment-type/list', method: 'get' }).finally(() => equipmentTypeLoading.value = false);
  equipmentTypeList.value = res.rows;
};

/** 提交按钮 */
const submitForm = () => {
  form.value.parkBuildingId = form.value.parkPlaceIdList[0];
  form.value.parkBuildingAreaId = form.value.parkPlaceIdList[1];
  form.value.parkBuildingFloorId = form.value.parkPlaceIdList[2];
  form.value.parkBuildingRoomId = form.value.parkPlaceIdList[3];
  form.value.groupType = 1 // 分组类型（1：摄像头；，2：消防设备；10：会议室；）
  cameraInfoFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      form.value.groupType = 1;
      await request({ url: '/equipment/equipment-info', method: 'post', data: form.value }).finally(() => (buttonLoading.value = false));
      proxy?.$modal.msgSuccess('操作成功');
      emit('success');
      emit('close');
    } else {
      proxy?.$modal.msgError('请检查输入项');
    }
  });
};
/** 新增 */

const singIvs3800DeviceSelectRef = ref<any>();
const openSelectDevice = () => {
  singIvs3800DeviceSelectRef.value.open();
}
/**
 * 选择设备
 */
const selectDevice = (data: any[]) => {
  console.log(data)
  let thing = data.length !== 0 ? data[0] : undefined;
  form.value.nodeId = thing.code
};
onMounted(() => {
  // 获取摄像头分组列表
  getCameraGroupList();
  //  获取设备类型列表
  getEquipmentTypeList();
  // 获取区域
  getPlaceList();
});
</script>
<style scoped lang="scss">

</style>
